<template>
    <!-- 客户端 -->
    <div class="white-box">
        <title-more title="小程序基本信息" />
        <cell-tip tip="请先授权小程序才会由完整的基本信息，前往“小程序管理-授权管理”进行授权" />
        <div class="info-box">
            <div class="info-h3" v-if="userAppletObj != null">
                <template v-if="user_auth_applet == 1">
                    <el-avatar :size="50" :src="userObjs.head_img" v-if="userObjs.head_img" />{{ userObjs.nick_name }}
                    <p @click="toDetail('/Setup/AppletManageUser')">
                        进入管理<el-icon size="14px"><ArrowRight /></el-icon>
                    </p>
                </template>
                <template v-else>客户端</template>
            </div>
            <template v-if="user_auth_applet == 1 && userAppletObj != null">
                <div class="info-cont">
                    <div class="info-base">
                        <p class="info-base-title">基本信息</p>
                        <div class="info-cont__item">
                            <p class="info-cont__left">APPID：</p>
                            <p class="info-cont__right">{{ userObjs.authorizer_appid }}</p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">审核类目：</p>
                            <p class="info-cont__right">
                                <span v-if="userObjs.first_class">{{ userObjs.first_class }} > {{ userObjs.second_class }}</span>
                                <span v-else>--</span>
                            </p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">主体信息：</p>
                            <p class="info-cont__right">{{ userObjs.principal_name }}</p>
                        </div>
                    </div>
                    <div class="info-base">
                        <p class="info-base-title">线上版本</p>
                        <div class="info-cont__item">
                            <p class="info-cont__left">当前版本：</p>
                            <p class="info-cont__right">{{ userAppletObj.release_info ? userAppletObj.release_info.release_version : "--" }}</p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">更新时间：</p>
                            <p class="info-cont__right">{{ userAppletObj.created_time || "--" }}</p>
                        </div>
                    </div>
                    <!-- <div class="info-base">
                        <img class="info-code" :src="userObjs.qrcode_url" alt="小程序体验码" />
                    </div> -->
                </div>
                <div class="info-foot">
                    <el-popover placement="right" :width="740" trigger="hover">
                        <template #reference>
                            <p class="info-foot__item">
                                <el-icon size="16px"><Unlock /></el-icon>解绑授权
                            </p>
                        </template>
                        <img src="https://saas.huashushop.com/saas/img/jcsq.png" />
                    </el-popover>
                </div>
            </template>
            <applet-tip-auth @click="clickAuth(1)" v-else />
        </div>
    </div>
    <!-- 员工端 -->
    <div class="white-box" style="padding-top: 0" v-if="staff_auth_applet == 1 && versions && versions.version_id == 4">
        <div class="info-box">
            <div class="info-h3" v-if="staffAppletObj != null">
                <template v-if="staff_auth_applet == 1">
                    <el-avatar :size="50" :src="staffObjs.head_img" v-if="staffObjs.head_img" />{{ staffObjs.nick_name }}
                    <p @click="toDetail('/Setup/AppletManageStaff')">
                        进入管理<el-icon size="14px"><ArrowRight /></el-icon>
                    </p>
                </template>
                <template v-else>员工端</template>
            </div>
            <template v-if="staff_auth_applet == 1 && staffAppletObj != null">
                <div class="info-cont">
                    <div class="info-base">
                        <p class="info-base-title">基本信息</p>
                        <div class="info-cont__item">
                            <p class="info-cont__left">APPID：</p>
                            <p class="info-cont__right">{{ staffObjs.authorizer_appid }}</p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">审核类目：</p>
                            <p class="info-cont__right">
                                <span v-if="staffObjs.first_class">{{ staffObjs.first_class }} > {{ staffObjs.second_class }}</span>
                                <span v-else>--</span>
                            </p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">主体信息：</p>
                            <p class="info-cont__right">{{ staffObjs.principal_name }}</p>
                        </div>
                    </div>
                    <div class="info-base">
                        <p class="info-base-title">线上版本</p>
                        <div class="info-cont__item">
                            <p class="info-cont__left">当前版本：</p>
                            <p class="info-cont__right">{{ staffAppletObj.release_info ? staffAppletObj.release_info.release_version : "--" }}</p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">更新时间：</p>
                            <p class="info-cont__right">{{ staffAppletObj.created_time || "--" }}</p>
                        </div>
                    </div>
                    <!-- <div class="info-base">
                        <img class="info-code" :src="staffObjs.qrcode_url" alt="小程序体验码" />
                    </div> -->
                </div>
                <div class="info-foot">
                    <el-popover placement="right" :width="740" trigger="hover">
                        <template #reference>
                            <p class="info-foot__item">
                                <el-icon size="16px"><Unlock /></el-icon>解绑授权
                            </p>
                        </template>
                        <img src="https://saas.huashushop.com/saas/img/jcsq.png" />
                    </el-popover>
                </div>
            </template>
            <applet-tip-auth @click="clickAuth(2)" v-else />
        </div>
    </div>
    <!-- 供应商端 -->
    <div class="white-box" style="padding-top: 0" v-if="supplier_auth_applet == 1">
        <div class="info-box">
            <div class="info-h3" v-if="suppAppletObj != null">
                <template v-if="supplier_auth_applet == 1">
                    <el-avatar :size="50" :src="supplierObjs.head_img" v-if="supplierObjs.head_img" />{{ supplierObjs.nick_name }}
                    <p @click="toDetail('/Setup/AppletManageSupp')">
                        进入管理<el-icon size="14px"><ArrowRight /></el-icon>
                    </p>
                </template>
                <template v-else>供应商端</template>
            </div>
            <template v-if="supplier_auth_applet == 1 && suppAppletObj != null">
                <div class="info-cont">
                    <div class="info-base">
                        <p class="info-base-title">基本信息</p>
                        <div class="info-cont__item">
                            <p class="info-cont__left">APPID：</p>
                            <p class="info-cont__right">{{ supplierObjs.authorizer_appid }}</p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">审核类目：</p>
                            <p class="info-cont__right">
                                <span v-if="supplierObjs.first_class">{{ supplierObjs.first_class }} > {{ supplierObjs.second_class }}</span>
                                <span v-else>--</span>
                            </p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">主体信息：</p>
                            <p class="info-cont__right">{{ supplierObjs.principal_name }}</p>
                        </div>
                    </div>
                    <div class="info-base">
                        <p class="info-base-title">线上版本</p>
                        <div class="info-cont__item">
                            <p class="info-cont__left">当前版本：</p>
                            <p class="info-cont__right">{{ suppAppletObj.release_info ? suppAppletObj.release_info.release_version : "--" }}</p>
                        </div>
                        <div class="info-cont__item">
                            <p class="info-cont__left">更新时间：</p>
                            <p class="info-cont__right">{{ suppAppletObj.created_time || "--" }}</p>
                        </div>
                    </div>
                    <!-- <div class="info-base">
                        <img class="info-code" :src="supplierObjs.qrcode_url" alt="小程序体验码" />
                    </div> -->
                </div>
                <div class="info-foot">
                    <el-popover placement="right" :width="740" trigger="hover">
                        <template #reference>
                            <p class="info-foot__item">
                                <el-icon size="16px"><Unlock /></el-icon>解绑授权
                            </p>
                        </template>
                        <img src="https://saas.huashushop.com/saas/img/jcsq.png" />
                    </el-popover>
                </div>
            </template>
            <applet-tip-auth @click="clickAuth(3)" v-else />
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, computed, onActivated } from "vue"
import { useRouter, useRoute,onBeforeRouteLeave } from "vue-router"
import { useBaseStore } from "@store/base"
import { ArrowRight, Unlock } from "@element-plus/icons-vue"
import CellTip from "@components/cell-tip.vue"
import AppletTipAuth from "@components/AppletTipAuth.vue"
import TitleMore from "@components/title-more.vue"

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

const storeBase = useBaseStore()
const versions = computed(() => {
    return storeBase.versions
})
const user_auth_applet = computed({
    get() {
        return storeBase.user_auth_applet // 用户端小程序是否已经授权，0否，1是
    },
    set(newValue) {
        storeBase.setUserAuth(newValue)
    },
})
const staff_auth_applet = computed({
    get() {
        return storeBase.staff_auth_applet // 员工端小程序是否已经授权，0否，1是
    },
    set(newValue) {
        storeBase.setStaffAuth(newValue)
    },
})
const supplier_auth_applet = computed({
    get() {
        return storeBase.supplier_auth_applet // 供应商端小程序是否已经授权，0否，1是
    },
    set(newValue) {
        storeBase.setSupplierAuth(newValue)
    },
})

let code = route.query.auth_code || proxy.$util.getUrlParam("auth_code")
// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (from.name === "AppletBaseInfo") {
        storeBase.setInclude("AppletBaseInfo")
    }
    next()
})

onActivated(() => {
    !code && getAuthInfo()
    code && getAuth(code)
})

onMounted(() => {
    !code && getAuthInfo()
    code && getAuth(code)
})

// 上传授权码
const client_os = ["client_mini_program", "staff_mini_program", "supplier_mini_program"]
function getAuth(code) {
    let sq_type = localStorage.getItem("SQ_TYPE") || 0
    proxy.$axios
        .post("mp/queryAuth", {
            client_os: client_os[sq_type],
            authorization_code: code,
        })
        .then((res) => {
            if (res.data.code == 0) {
                storeBase.setUserAuth(1)
                window.location.href = `${proxy.$urls}/saas/#/Setup/AppletBaseInfo`
                getAuthInfo()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 获取小程序基本信息
const userObjs = ref({})
const staffObjs = ref({})
const supplierObjs = ref({})
function getAuthInfo() {
    getPublickAuth(0) // 用户端
    versions.value && versions.value.version_id == 4 && getPublickAuth(1) // 员工端
    getPublickAuth(2) // 供应商端
}
function getPublickAuth(type) {
    proxy.$axios
        .get("mp/authInfo", {
            params: {
                client_os: client_os[type],
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                // console.log("小程序基本信息", result)
                if (type == 0) {
                    userObjs.value = result
                    user_auth_applet.value = result && result.auth_status == 1 ? 1 : 0
                } else if (type == 1) {
                    staffObjs.value = result
                    staff_auth_applet.value = result && result.auth_status == 1 ? 1 : 0
                    // storeBase.setStaffAuth(1)
                } else {
                    supplierObjs.value = result
                    supplier_auth_applet.value = result && result.auth_status == 1 ? 1 : 0
                    // storeBase.setSupplierAuth(1)
                }
                getAppletInfo(type)
                getExamStatus(type)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const toDetail = (url) => {
    router.push(url)
}

// 查询小程序版本信息
const userAppletObj = ref(null)
const staffAppletObj = ref(null)
const suppAppletObj = ref(null)
function getAppletInfo(type) {
    proxy.$axios
        .get("mp/getVersionInfo", {
            params: {
                client_os: client_os[type],
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                if (result.release_info && Object.keys(result.release_info).length > 0) {
                    result.created_time = proxy.$util.formatDate(result.release_info.release_time)
                }
                // console.log("版本信息", result)
                if (type == 0) {
                    userAppletObj.value = result
                } else if (type == 1) {
                    staffAppletObj.value = result
                } else {
                    suppAppletObj.value = result
                }
            } else if (res.data.code == 12001) {
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 去授权
const clickAuth = (type) => {
    if (type == 1) {
        storeBase.setUserAuth(0)
    } else if (type == 2) {
        storeBase.setStaffAuth(0)
    } else {
        storeBase.setSupplierAuth(0)
    }
    router.push("/Setup/AppletManage")
}
</script>
<script>
export default {
    name: "AppletBaseInfo",
}
</script>

<style lang="less" scoped>
.info-box {
    .info-h3 {
        font-size: @font-size-lg;
        font-weight: bold;
        color: #111;
        border-bottom: @border-gray;
        padding: @padding-mdl 0px;
        display: flex;
        align-items: center;
        .el-avatar {
            margin-right: 10px;
        }
        p {
            display: flex;
            align-items: center;
            color: @themes;
            margin-left: @margin-mdl;
            font-size: @font-size-md;
            cursor: pointer;
            &:hover {
                color: #76aafa;
            }
        }
    }
    .info-cont {
        padding: @padding-md 0 @padding-xl;
        border-bottom: @border-gray;
        display: flex;
        .info-base {
            width: 33%;
            .info-base-title {
                font-size: 15px;
                font-weight: bold;
                color: #111;
                margin-bottom: @margin-sm;
            }
            .info-cont__item {
                display: flex;
                align-items: center;
                margin-bottom: @margin-sm;
                color: @gray-8;
                .info-cont__left {
                    flex: none;
                    margin-right: @margin-base;
                }
                .info-cont__right {
                    flex: 1;
                }
            }
        }
    }
    .info-foot {
        display: flex;
        align-items: center;
        padding-top: @padding-mdl;
        color: @gray-6;
        .info-foot__item {
            display: flex;
            align-items: center;
            .el-icon {
                margin-right: @margin-base;
            }
        }
    }
    .info-code {
        width: 140px;
    }
}

.unauth-box {
    height: auto;
}
</style>
